<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .content {
        width: 310px;
        height: 200px;
        margin: 0 auto;
        margin-top: 15%;
        border: 1px solid rgb(228, 228, 228);
        /* background-color: aliceblue; */
      }

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: rgb(231, 231, 231);
        padding-left: 20px;
        padding-right: 20px;
      }

      .title i {
        font-size: 15px;
        text-align: center;
        cursor: pointer;
        font-style: normal;
      }

      table {
        tr {
          height: 40px;
          border-bottom: 1px solid rgb(230, 230, 230);

          th {
            padding-left: 10px;
            text-align: center;
          }
        }
      }

      button {
        cursor: pointer;
        border-radius: 50%;
        border: 0;
        background-color: rgb(240, 105, 59);
        color: rgb(0, 0, 0);
        text-align: center;
      }

      .footer {
        width: 310px;
        height: 40px;
        margin: 0 auto;
        display: flex;
        /* background-color: red; */
      }

      .footer .left {
        width: 230px;
        height: 40px;
        display: flex;
        background-color: rgb(19, 29, 39);
      }

      .footer .right {
        width: 80px;
        height: 40px;
        background-color: red;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="content">
        <div class="title">
          <span>已选商品</span>
          <span class="del" style="cursor: pointer">清空</span>
        </div>
        <div class="main">
          <table style="border-collapse: collapse; border: 0">
            <tr>
              <th>肉沫茄子盖饭</th>
              <th style="color: red">￥15.88</th>
              <th>
                <button class="reduce">-</button>
                <i
                  class="num"
                  style="
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    font-size: 12px;
                  "
                  >1</i
                >
                <button class="add">+</button>
              </th>
            </tr>
            <tr>
              <th>台式卤肉双拼套餐</th>
              <th style="color: red">￥20.88</th>
              <th>
                <button class="reduce">-</button>
                <i
                  class="num"
                  style="
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    font-size: 12px;
                  "
                  >1</i
                >
                <button class="add">+</button>
              </th>
            </tr>
          </table>
        </div>
      </div>
      <div class="footer">
        <div class="left">
          <div
            style="
              position: relative;
              width: 35px;
              height: 35px;
              border-radius: 50px;
              background-color: rgb(38, 46, 52);
              margin-top: -18px;
              margin-left: 20px;
              text-align: center;
              border: 2px solid black;
            "
          >
            <img
              style="
                width: 25px;
                height: 25px;
                background-size: cover;
                margin-top: 5px;
              "
              src="./img/gw.png"
              alt=""
            />
            <i
              class="chetitle"
              style="
                position: absolute;
                top: -5px;
                left: 25px;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background-color: red;
                color: white;
                font-size: 10px;
              "
              >2</i
            >
          </div>
          <p style="color: rgb(223, 223, 223); line-height: 10px">
            ￥<i class="price">36.76</i>
          </p>
        </div>

        <div
          class="right"
          style="
            text-align: center;
            line-height: 40px;
            color: rgb(234, 234, 234);
          "
        >
          去结算
        </div>
      </div>
    </div>

    <!-- 清空的点击 -->
    <script>
      //获取清空
      var del = document.querySelector(".del");
      // console.log(del);
      //获取所有得商品栏
      var goods = document.querySelectorAll("tr");
      // console.log(goods);

      // 获取所买商品得数量
      var chetitle = document.querySelector(".chetitle");
      // console.dir(chetitle.innerHTML);

      //清空得点击事件
      del.onclick = function () {
        goods[0].remove();
        goods[1].remove();
        if (chetitle.innerText > 0) {
          chetitle.style.display = "none";
          price.innerText = 0;
        }
      };
    </script>
    <!-- 价格数量计算 -->
    <script>
      //先获取加号按钮
      var add = document.querySelectorAll(".add");
      // console.log(add);
      var reduce = document.querySelectorAll(".reduce");
      // console.log(reduce);
      var num = document.querySelectorAll(".num");
      // console.log(num);
      //获取总价
      var price = document.querySelector(".price");
      console.log(price);

      add[0].onclick = add1;
      add[1].onclick = add2;

      reduce[0].onclick = reduce1;
      reduce[1].onclick = reduce2;
      //加加
      function add1() {
        //单个数量
        num[0].innerText++;
        //总数
        chetitle.innerText++;
        //总价
        price.innerText = (price.innerText - 0 + 15.88).toString().slice(0, 6);
      }
      function add2() {
        num[1].innerText++;
        chetitle.innerText++;
        price.innerText = (price.innerText - 0 + 20.88).toString().slice(0, 6);
      }

      //减减s
      function reduce1() {
        if (num[0].innerText !== "1") {
          num[0].innerText--;
          chetitle.innerText--;
          price.innerText = (price.innerText - 0 - 15.88).toFixed(2);
        } else {
        }
      }

      function reduce2() {
        if (num[1].innerText !== "1") {
          num[1].innerText--;
          chetitle.innerText--;
          price.innerText = (price.innerText - 0 - 20.88).toFixed(2);
        } else {
        }
      }
    </script>
  </body>
</html>
